<template>
	<view>
		<!-- 带返回箭头、搜索、定位 -->
		<view class="header-fixed">
			<!-- 状态栏 -->
			<view :style="{ height: statusBarHeight + 'px'}" class="stat"></view>

			<!-- 标题栏 -->
			<view :style="{ height: navigationBarHeight + 'px'}" class="navigation">
				<!-- #ifndef MP-BAIDU -->
				<view @click="onback" class="back">
					<view class="t-icon icon-pic svg-zuojiantou_huaban"></view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-BAIDU -->
				<view @ class="back">
					<view class="t-icon "></view>
				</view>
				<!-- #endif -->
				<!-- <view class="back">
					<view @click="onback" class="t-icon icon-pic svg-zuojiantou_huaban"></view>
				</view> -->

				<view class="search">
					<uni-search-bar :focus="focusFlag" v-model="destination" @search="search" @input="input" @clear="clear"
						@cancel="cancel" @blur="blur" @focus="focus" :placeholder="placeholder" :bgColor="bgColor"
						:cancelButton="cancelButton" :cancelText="cancelText" radius='20'>
						<!-- <template v-slot:searchIcon>
							&nbsp;
							</template> -->
					</uni-search-bar>
				</view>
				<!-- 占位框,小程序胶囊 -->
				<!-- #ifdef MP-WEIXIN || MP-BAIDU -->
				<view class="placeholder"></view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 空白占位,防止定位导致坍塌 -->
		<view :style="{ height: statusBarHeight + navigationBarHeight + 'px',background:'#fff'}"></view>

	</view>
</template>

<script>
	import {
		debounce
	} from '@/common/hint.js'
	export default {
		emits: ['input', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
		props: {
			// 默认提示文字
			placeholder: {
				type: String,
				default: '请输入搜索内容'
			},
			// 聚焦搜索框
			focusFlag:{
				type: Boolean,
				default: true,
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: '#eee'
			},
			// 右侧控件显示
			cancelButton: {
				type: String,
				default: 'none' //always-一直显示、auto-输入框不为空时显示、none-一直不显示
			},
			// 右侧控件文本
			cancelText: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navigationBarHeight: 0,
				destination: '',
			}
		},
		mounted() {
			// #ifndef MP-BAIDU
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.navigationBarHeight = getApp().globalData.navigationBarHeight
			// #endif
			// 百度小程序调用百度api获取状态栏高度
			// #ifdef MP-BAIDU
			this.statusBarHeight = swan.getSystemInfoSync().statusBarHeight
			this.navigationBarHeight = swan.getSystemInfoSync().navigationBarHeight
			// #endif

		},
		methods: {
			onback: debounce(function() {
				const pages = getCurrentPages()
				// 有可返回的页面则直接返回，uni.navigateBack  默认返回失败之后会自动刷新页面 ，无法继续返回
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				// 如果用户刷新网页导致页面返回失败,退回首页
				uni.switchTab({
					url: '/pages/index/index'
				})
				return;
			}),
			// 键盘回车 搜索
			search(res) {
				this.$emit("search", res.value)
			},
			// input
			input(res) {
				this.$emit("input", res)
			},
			// 'clear事件，清除值为：' + res.value
			clear(res) {
				this.$emit("clear", res.value)
			},
			// 'blur事件，输入值为：' + res.value
			blur(res) {
				this.$emit("blur", res.value)
			},
			// 'focus事件，输出值为：' + e.value
			focus(res) {
				this.$emit("focus", res.value)
			},
			// '点击取消，输入值为：' + res.value
			cancel(res) {
				this.$emit("cancel", res.value)
			}
		},

	}
</script>
<style lang="scss">
	.header-fixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
		left: 0;

		.stat {
			background-color: #fff;
			height: var(--status-bar-height); // --status-bar-height系统状态栏高度
			width: 100%;
		}

		.navigation {
			background-color: #fff;
			width: 100%;
			display: flex;
			align-items: center;

			.back {
				//background-color: #55aa7f;
				// padding: 0 20rpx;
				padding-left: 20rpx;

				.t-icon {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.search {
				flex: 1;
				font-size: 36rpx;

			}

			.placeholder {
				width: 200rpx;
			}
		}
	}
</style>